<template>
  <div>
    <v-card title="基础旭日图">
      <vcu-chart-sunburst :data="chartData" :settings="chartSettings" />
    </v-card>
  </div>
</template>

<script>
export default {
  name: "basic",
  data() {
    return {
      chartData: {
        dimensions: {
          name: "",
          data: [],
        },
        measures: [
          {
            name: "",
            data: [
              {
                name: "前端",
                children: [
                  {
                    name: "javascript",
                    value: 15,
                    children: [
                      { name: "react", value: 6 },
                      { name: "vue", value: 5 },
                      { name: "angular", value: 4 },
                    ],
                  },
                  {
                    name: "css",
                    value: 10,
                    children: [
                      { name: "less", value: 5 },
                      { name: "sass", value: 1 },
                      { name: "styls", value: 4 },
                    ],
                  },
                ],
              },
              {
                name: "后端",
                children: [
                  {
                    name: "java",
                    children: [
                      { name: "spring mvc", value: 10 },
                      { name: "spring boot", value: 20 },
                    ],
                  },
                ],
              },
            ],
          },
        ],
      },
      chartSettings: {
        radius: [0, "80%"],
        label: {
          rotate: 0,
        },
        tooltip: {
          show: true,
        },
      },
    };
  },
  methods: {},
  created() {},
};
</script>
<style lang="less" scoped>
</style>
